<!-- 
  封装分页功能
  通过传值来改变页码
-->
<template>
  <el-config-provider :locale="$i18n.locale == 'zh' ? zhCn : en">
    <div class="demo-pagination-block">
      <el-pagination
        :page-sizes="[10, 20, 30, 50]"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listdata.total"
        :page-size="props.listdata.limit"
        :current-page="props.listdata.page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- 回到顶部 -->
      <el-backtop target=".el-main" :bottom="35" ref="backtop" />
    </div>
  </el-config-provider>
</template>

<script lang="ts" setup>
import { ref, watch, computed} from "vue";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import en from "element-plus/dist/locale/en.mjs";

const background = ref(true);
// const pageNum = ref(1) //页码
// const pageSize = ref(10) //每一页的数据条数
const backtop = ref(null); // 点击每一个分页时滚动条重置
// 子传父
const emit = defineEmits<{
  (e: "Change", listdata): void;
}>();
const stoper = () => {
  emit("Change", props.listdata);
  // 滚动条溢出
  setTimeout(() => {
    backtop.value.$el.click?.();
  }, 300);
};

const props = defineProps({
  //获取传过来的值
  listdata: {
    type: Object,
  },
});

const pages = computed(() => {
  // 总条数除以每页的条数向上取整得到最大显示页数
  return Math.ceil(props.listdata.total / props.listdata.limit);
});

// 点击切换总条数
const handleSizeChange = (val: number) => {
  console.log(pages, "1");
  //未改变之前显示的条数
  let index = props.listdata.limit;
  //改变之后的条数
  props.listdata.limit = val;
  //判断当前页码是否等于当前总页数
  if (Math.ceil(props.listdata.total / index) == props.listdata.page) {
    props.listdata.page = pages.value;
  }
  stoper();
};
// 点击切换页面
const handleCurrentChange = (val: number) => {
  props.listdata.page = val;
  stoper();
};

// watch(pageNum, (newVal, oldVal) => {
//   emit('pageChange', newVal)
//   emit('logId', newVal)
//   // 触发滚动组件的点击事件  加定时器是因为速度过快，滚动条溢出
//   setTimeout(() => {
//     backtop.value.$el.click?.() // es2028新语法，用于判断?前面的对象是否不为空，如果不为空这调用后面的方法或属性。
//   }, 300);

// });

// watch(pageSize, (newval, oldVal) => {
//   emit("sizeChange", newval)
//   emit("logId", newval)
//   setTimeout(() => {
//     backtop.value.$el.click?.() // es2028新语法，用于判断?前面的对象是否不为空，如果不为空这调用后面的方法或属性。
//   }, 300);

// })
</script>

<style lang="less" scoped>
.demo-pagination-block {
  width: 100%;
  margin: 20px auto;
}
</style>
